<template>
	<!-- 需求广场 -->
	<view class="khzy-list" :class="idmypublish?'khzy-list-idmypublish':''">
		<view class="row" v-for="(khzy, index) in khzyData" :key="index">
			<view v-if="idmypublish" class="row-tag-title">
				<view class="row-tag-title-left"><uni-icons type="star-filled" size="16"
						color="#AC6C17"></uni-icons>需求广场
				</view>
			</view>
			<!-- 已成交 -->
			<image class="ycj" v-if="khzy.releaseStatus == '已成交'"
				src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/ycj_bg.png" mode="widthFix"></image>
			<!-- 加急 -->
			<image class="ycj" v-if="khzy.urgentStatus == true && khzy.releaseStatus !== '已成交'"
				src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/jj_bg.png" mode="widthFix"></image>
			<view v-if="!idmypublish" class="row-top">
				<view class="left">
					<view class="head" @click="toPage(khzy)">
						<image class="profilephoto" :src="khzy.member?khzy.member.avatar:khzy.avatar" mode="widthFix">
						</image>
						<!-- VIP -->
						<image class="vip" v-if="khzy.member.authStatus == '1' || khzy.member.authStatus == '2' || khzy.authStatus == '1' || khzy.authStatus == '2'"
							src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_vip.png"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="right">
					<view class="right-row-between right-row-flex-start">
						<!-- 姓名 -->
						<view class="name">{{ khzy.member.realName || khzy.realName }}</view>
						<!-- 认证 -->
						<view class="authenticated" v-if="khzy.member.srStatus == '1'">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_yrz.png"
								mode="widthFix"></image>
							<text>已实名</text>
						</view>
					</view>
					<view class="right-row">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/address_yellow.png"
							mode="widthFix"></image>{{ khzy.city }}
					</view>
				</view>
			</view>
			<view class="row-bottom">
				<view class="right-row-between">
					<view class="row-text-block">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_sxje.png"
							mode="widthFix"></image>
						<text>所需额度：</text>
						<text><text> {{ khzy.sxed }}</text>万</text>
					</view>
					<view class="row-text-block">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/home_nl.png"
							mode="widthFix"></image>
						<text>年龄：</text>
						<text>{{ khzy.age }}</text>
					</view>
				</view>
				<view class="row-text">
					<text>资金用途：</text>
					<text :class="idmypublish || isTextVisible?'text1':''">{{ khzy.zjyt }}</text>
				</view>
				<view class="row-text">
					<text>资产情况：</text>
					<text :class="idmypublish || isTextVisible?'text1':''">{{ khzy.zcqk }}</text>
				</view>

				<view class="row-text">
					<text>个人情况：</text>
					<text :class="idmypublish || isTextVisible?'text1':''">{{ khzy.zxqk }}</text>
				</view>

				<view class="sxcp">
					<view class="sxcp-left">所需业务：</view>
					<view class="sxcp-right">
						<view class="sxcp-block" v-for="(cp, index) in khzy.xycp" :key="index">{{ cp }}
						</view>
					</view>
				</view>
				<view v-if="idmypublish && khzy.releaseStatus === '驳回'" class="row-text">
					<text>驳回说明：</text>
					<text>{{ khzy.releaseCheckIdea }}</text>
				</view>
				<!-- 编辑、删除 -->
				<view v-if="idmypublish" class="row-edit-del">
					<view v-if="khzy.releaseStatus === '展示中' || khzy.releaseStatus === '审核中'" class="block-btn"
						:class="khzy.urgentStatus?'block-btn1':''" @click="tjClick(khzy)">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wdfb_tj.png"
							mode="widthFix"></image> {{ khzy.urgentStatus ? '取消特急' : '特急' }}
					</view>
					<view v-if="khzy.releaseStatus !== '展示中' && khzy.releaseStatus !== '已成交'" class="block-btn"
						@click="editClick(khzy)">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wdfb_bj.png"
							mode="widthFix"></image> 编辑
					</view>
					<view class="block-btn" @click="delClick(khzy)">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wdfb_sc.png"
							mode="widthFix"></image> 删除
					</view>
					<view v-if="khzy.releaseStatus == '展示中'" class="block-btn" @click="ycjClick(khzy)">
						<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wdfb_ycj.png"
							mode="widthFix"></image> 已成交
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Khzy",
		data() {
			return {

			};
		},
		props: {
			khzyData: {
				type: Array,
				default: () => []
			},
			// 判断是否是我发布的
			idmypublish: {
				type: Boolean,
				debugger: false
			},
			isTextVisible: {
				type: Boolean,
				debugger: false
			},
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},
		methods: {
			// 跳转名片
			toPage(i) {
				// 检查登录状态
				if (!this.$store.state.user.isLoggedIn) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					// 跳转到我的页面
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/index/index'
						});
					}, 1500);
					return;
				}
				
				// 检查实名认证状态
				if (this.userInfo.srStatus !== '1' && this.userInfo.guid !== i.member.guid) {
					uni.showToast({
						title: '认证完成后才能查看用户信息',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: `/pages/my-card/my-card?id=${i.createUserId}`
				});
			},
			// 编辑
			editClick(i) {
				this.$emit('on-edit', i);
			},
			// 删除
			delClick(i) {
				this.$emit('on-delete', i, '需求广场');
			},
			// 已成交
			ycjClick(i) {
				uni.showModal({
					title: '提示',
					content: '该需求是否已成交？',
					success: (res) => {
						if (res.confirm) {
							this.$emit('on-ycj', i);
						}
					}
				});
			},
			// 特急
			tjClick(i) {
				if (this.userInfo.userType === '普通用户') {
					uni.showToast({
						title: '开通会员才能使用此功能',
						icon: 'none'
					});
					return;
				}
				const action = i.urgentStatus ? '取消特急' : '加为特急';
				uni.showModal({
					title: '提示',
					content: `该需求是否${action}？`,
					success: (res) => {
						if (res.confirm) {
							this.$emit('on-tj', i);
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	// 客户资源
	.khzy-list {
		margin-top: 10rpx;
		padding: 0 30rpx;

		&.khzy-list-idmypublish {
			padding: 0;

			.row {
				background-color: #FFF7EE;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 20rpx 30rpx;
			}
		}

		.row {
			position: relative;
			display: flex;
			flex-direction: column;
			padding: 20rpx 0;

			.ycj {
				z-index: 2;
				position: absolute;
				right: -10rpx;
				top: 0rpx;
				width: 178rpx;
				height: 178rpx;
			}

			.row-top {
				display: flex;
				align-items: center;

				.left {
					display: flex;
					flex-direction: column;
					margin-right: 40rpx;
					flex-shrink: 0;

					.head {
						position: relative;
						// 头像

						.profilephoto {
							width: 100rpx;
							height: 100rpx;
							border: 2rpx solid #D8A561;
							border-radius: 100%;
						}

						.vip {
							width: 38rpx;
							height: 31rpx;
							position: absolute;
							right: -10rpx;
							top: 4rpx;
						}
					}

				}

				.right {
					position: relative;
					flex: 1;
					display: flex;
					flex-direction: column;

					.right-row-between {
						display: flex;
						justify-content: space-between;

						&.right-row-flex-start {
							justify-content: flex-start;
							align-items: center;

							.authenticated {
								position: relative;
								top: -2rpx;
								margin-left: 30rpx;
							}
						}

						// 姓名
						.name {
							font-size: 36rpx;
							margin-bottom: 18rpx;
							font-weight: bold;
						}

						// 认证
						.authenticated {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #AC6C17;

							image {
								width: 21rpx;
								height: 24rpx;
								margin-right: 6rpx;
							}
						}
					}

					.right-row {
						display: flex;
						align-items: center;
						color: #AC6C17;
						font-weight: bold;
						font-size: 28rpx;
						margin-top: 6rpx;

						image {
							width: 23.16rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}
					}
				}
			}

			.row-bottom {
				display: flex;
				flex-direction: column;
				margin-top: 25rpx;

				.right-row-between {
					display: flex;
					justify-content: space-between;
					margin: 5rpx 0 20rpx;

					.row-text-block {
						display: flex;
						align-items: center;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}

						text {
							color: #333;
							font-size: 28rpx;
							font-weight: bold;
						}
					}
				}

				.row-text {
					display: flex;
					padding: 12rpx 0;

					>text {
						font-size: 28rpx;
						color: #333;

						&:last-child {
							display: flex;
							flex: 1;
							color: #AC6C17;
							background: #FFEFD9;
							padding: 8rpx 15rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							text-overflow: ellipsis;

							&.text1 {
								-webkit-line-clamp: 10;
								overflow: visible;
								text-overflow: clip;
							}
						}
					}
				}

				.sxcp {
					display: flex;
					padding: 12rpx 0;

					.sxcp-left {
						position: relative;
						top: 4rpx;
						font-size: 28rpx;
						color: #333;
					}

					.sxcp-right {
						position: relative;
						top: -4rpx;
						display: flex;
						flex: 1;
						align-items: center;
						flex-wrap: wrap;
						font-size: 26rpx;
						color: #000;

						.sxcp-block {
							min-width: 125rpx;
							text-align: center;
							font-size: 28rpx;
							background: #FFEFD9;
							padding: 10rpx 20rpx;
							box-sizing: border-box;
							border-radius: 4rpx;
							margin-right: 20rpx;
							margin-bottom: 20rpx;
							color: #AC6C17;
						}
					}
				}
			}


			// .right {
			// 	position: relative;
			// 	flex: 1;
			// 	display: flex;
			// 	flex-direction: column;

			// 	.animate {
			// 		position: absolute;
			// 		right: 10rpx;
			// 		top: 5rpx;
			// 		font-size: 26rpx;
			// 		color: #B8812F;
			// 	}

			// 	.row-text-absolute {
			// 		position: absolute;
			// 		right: 0;
			// 		top: 0;
			// 		display: flex;
			// 		padding: 12rpx 0;

			// 		>text {
			// 			font-size: 26rpx;
			// 			color: #333;

			// 			&:last-child {
			// 				font-size: 28rpx;
			// 				font-weight: bold;
			// 			}
			// 		}
			// 	}




			// }

		}
	}
</style>